<template>
  <section class="section sec-5" id="sec-5">
    <div class="mo-max-size-box mo-lr-box gap-20">
      <div class="left mo-align-center-txt-box">
        <h2 class="mo-title">Kitchen Supplies<br />厨房用品</h2>
        <p class="mo-desc ma-top-30">
          We provide you with a variety of high-quality, practical, and fashionable kitchen supplies to help you
          showcase unique cooking skills and creativity in the kitchen.
        </p>
      </div>
      <div class="right">
        <img class="mo-cover" src="/kitchen.jpg" />
      </div>
    </div>
    <div class="list mo-max-size-box ma-top-30">
      <template v-for="(item, index) in list" :key="index">
        <div class="item">
          <div class="container">
            <div class="cover">
              <img class="bg" :src="item.bg" />
            </div>
            <h3 class="title">{{ item.title }}</h3>
            <a :href="item.link" target="_blank" class="mo-btn small">{{ item.btn }}</a>
          </div>
        </div>
      </template>
    </div>
  </section>
</template>
<script>
export default {
  name: 'co-section-5',
  data() {
    return {
      list: [
        {
          bg: '/kitchen-1.jpg',
          title: 'ASOBEAGE Kitchen Shelf 2 Levels',
          btn: 'Buy Now',
          link: 'https://www.amazon.de/dp/B0CCJH5LMX?ref=myi_title_dp',
        },
        {
          bg: '/kitchen-2.jpg',
          title: 'SOBEAGE Under Sink Shelf',
          btn: 'Buy Now',
          link: 'https://www.amazon.de/-/en/ASOBEAGE-Organiser-Cupboard-Kitchens-Bathrooms/dp/B0B42B21YW?ref_=ast_sto_dp&th=1',
        },
        {
          bg: '/kitchen-3.jpg',
          title: 'ASOBEAGE Undersink Mat',
          btn: 'Buy Now',
          link: 'https://www.amazon.de/-/en/ASOBEAGE-Undersink-Waterproof-Material-Protective/dp/B0CMXHVWNS?ref_=ast_sto_dp',
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.sec-5 {
  height: auto;
  .list {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;

    .item {
      width: 33.33%;
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .container {
        width: 300px;
        .cover {
          background: #eee;
          width: 100%;
          height: 360px;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;

          img {
            display: block;
            width: 90%;
            height: 90%;
            object-fit: contain;
            mix-blend-mode: multiply;
          }
        }

        .title {
          font-size: 16px;
          margin: 16px 0 10px;
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .sec-5 {
    .list {
      padding: 0 20px;
      .item {
        width: 100%;
        margin-bottom: 20px;

        .container {
          width: 100%;
        }
      }
    }
  }
}
</style>
